<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>媒体控制</title>
    <link rel="shortcut icon" href="http://bufanui.com/shortcut.ico" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .progress {
            width: 300px;
            height: 10px;
            background-color: #ff9000;
        }

        .line {
            width: 100px;
            height: 100%;
            background-color: #f00;
        }

        video {
            width: 400px;
        }
    </style>
</head>
<body>
    <audio src="../lib/image/HC/1.mp3" controls></audio>
    <!-- <video src="../2-Client家族/滚动进度条.webm" controls></video> -->

    <br>
    <button>获取当前音视频的播放状态</button>
    <button>设置音视频的音量</button>

    <div>
        <h2>声音控制</h2>
        <input type="range" min="0" max="100" value="0" class="volume">
    </div>

    <div>
        <h2>控制是否播放</h2>
        <button>播放/暂停</button>
    </div>

    <div>
        <h2>播放进度</h2>
        <p class="time">
            <span>0:00</span>
            /
            <span>0:00</span>
        </p>
    </div>

    <div>
        <h2>播放进度条</h2>
        <!-- 作业1 -->
        <!-- <input type="range" min="0" max="100" class="progress" value="0"> -->
        <div class="progress">
            <div class="line"></div>
        </div>
    </div>

    <div>
        <h2>播放速率</h2>
        <select class="rate">
            <option value="0.25">0.25</option>
            <option value="0.5">0.5</option>
            <option value="0.75">0.75</option>
            <option value="1">1</option>
            <option value="1.25">1.25</option>
            <option value="1.5">1.5</option>
            <option value="1.75">1.75</option>
            <option value="2">2</option>
        </select>
    </div>

    <script type="text/javascript">
        var ad = document.querySelector("audio"),
            btns = document.querySelectorAll("button"),
            volume = document.querySelector(".volume"),
            time = document.querySelector(".time"),
            progress = document.querySelector(".progress"),
            rate = document.querySelector(".rate");

        console.log(ad.duration); // NaN

        // 音视频加载完成，可以播放的事件
        ad.oncanplay = function (){
            // 音视频的总时长
            console.log(ad.duration); // 163.63102
            time.children[1].innerText = dealTime(ad.duration);
        }

        btns[0].onclick = function (){
            // ad.paused 是否是暂停
            console.log(ad.paused ? "暂停状态" : "播放状态");
        }

        btns[1].onclick = function (){
            // 设置或者读取音量
            console.log("当前音视频的音量", ad.volume);
            // ad.volume = .5;
        }

        volume.oninput = function (){
            // 输入框内容实时改变监听   change 改变过后监听
            // console.log(this.value);
            ad.volume = this.value / 100;
        }

        btns[2].onclick = function (){
            // 播放暂停
            if(ad.paused){
                ad.play();
            }else {
                ad.pause();
            }
        }

        // 播放过程中持续触发的事件
        ad.ontimeupdate = function (){
            // 输出当前的播放进度
            // console.log(this.currentTime);
            time.children[0].innerText = dealTime(this.currentTime);
        }

        // 进度条的改变
        progress.oninput = function (){
            // console.log(this.value);
            // 拖拽比例 = 播放进度/总时长
            ad.currentTime = ad.duration * this.value / 100;
        }

        // 控制播放速率
        rate.onchange = function (){
            // console.log(this.value);
            // 设置播放速率
            ad.playbackRate = this.value;
            console.log(ad.playbackRate);
        }


        function dealTime(second){
            var m = Math.floor(second / 60),
                s = Math.floor(second % 60);

            return m + ":" + ( s < 10 ? "0" + s : s);
        }
    </script>
</body>
</html>